// ========================================================================================
// media query
// ========================================================================================
$media-max-width-tablet = 800px;                          // media query max width (tablet)
$media-max-width-mobile = 500px;                          // media query max width (mobile)

picx-tablet()
  @media (max-width: $media-max-width-tablet)
    { block }

picx-mobile()
  @media (max-width: $media-max-width-mobile)
    { block }


// ========================================================================================
// z-index
// ========================================================================================
$z-index-1 = 1001;
$z-index-2 = 1002;
$z-index-3 = 1003;
$z-index-4 = 1004;
$z-index-5 = 1005;
$z-index-6 = 1006;
$z-index-7 = 1007;
$z-index-8 = 1008;
$z-index-9 = 1009;


// ========================================================================================
// light mode color
// ========================================================================================
$primary-color = #0066CC;
$background-color = #fff;
$second-background-color = darken($background-color, 5%);
$third-background-color = darken($background-color, 10%);
$default-text-color = #50505c;
$first-text-color = darken($default-text-color, 10%);
$second-text-color = darken($default-text-color, 5%);
$third-text-color = lighten($default-text-color, 30%);
$fourth-text-color = lighten($default-text-color, 90%);
$border-color = darken($background-color, 30%);
$selection-color = lighten($primary-color, 10%);
$shadow-color = rgba(0, 0, 0, 0.2);
$shadow-hover-color = rgba(0, 0, 0, 0.28);
$scrollbar-color = darken($background-color, 20%);
$scroll-bar-bg-color = darken($background-color, 30%);
$upload-area-focus-color = #0066CC;
$await-upload-color = #E6A23C;
$uploading-color = #409EFF;
$uploaded-color = #67C23A;



// ========================================================================================
// dark mode color
// ========================================================================================
$dark-primary-color = #0066CC;
$dark-background-color = #383940;
$dark-second-background-color = darken($dark-background-color, 10%);
$dark-third-background-color = darken($dark-background-color, 15%);
$dark-default-text-color = #bebec6;
$dark-first-text-color = lighten($dark-default-text-color, 30%);
$dark-second-text-color = lighten($dark-default-text-color, 20%);
$dark-third-text-color = darken($dark-default-text-color, 20%);
$dark-fourth-text-color = darken($dark-default-text-color, 80%);
$dark-border-color = lighten($dark-background-color, 20%);
$dark-selection-color = $selection-color;
$dark-shadow-color = rgba(128, 128, 128, 0.2);
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28);
$dark-scrollbar-color = darken($dark-background-color, 20%);
$dark-scroll-bar-bg-color = lighten($dark-background-color, 30%);
$dark-upload-area-focus-color = #1070d0;
$dark-await-upload-color = #c08327;
$dark-uploading-color = #287dd5;
$dark-uploaded-color = #55b626;



// ========================================================================
//  light/dark mode color
// ========================================================================
root-color(mode) {
  --background-color: mode == 'light' ? $background-color : $dark-background-color;
  --second-background-color: mode == 'light' ? $second-background-color : $dark-second-background-color;
  --third-background-color: mode == 'light' ? $third-background-color : $dark-third-background-color;
  --primary-color: mode == 'light' ? $primary-color : $dark-primary-color;
  --first-text-color: mode == 'light' ? $first-text-color : $dark-first-text-color;
  --second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color;
  --third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color;
  --fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color;
  --default-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color;
  --border-color: mode == 'light' ? $border-color : $dark-border-color;
  --selection-color: mode == 'light' ? $selection-color : $dark-selection-color;
  --shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color;
  --shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color;
  --scrollbar-color: mode == 'light' ? $scrollbar-color : $dark-scrollbar-color;
  --scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color;
  --upload-area-focus-color : mode == 'light' ? $upload-area-focus-color : $dark-upload-area-focus-color;
  --await-upload-color : mode == 'light' ? $await-upload-color : $dark-await-upload-color;
  --uploading-color : mode == 'light' ? $uploading-color : $dark-uploading-color;
  --uploaded-color : mode == 'light' ? $uploaded-color : $dark-uploaded-color;
}

